<template>
  <view class="schoolGroup"
        :style="{
                       'padding': '0px ' + properties.setStyle.pageMargin+'px',
                       'margin': properties.setStyle.pageMarginTop+'px '+' 0px',
                    }"
  >
    <view class="card"
          :style="{
                      'padding': properties.setStyle.padding+'px',
                      'border-radius': properties.setStyle.borderRadius+'px',
                      'padding-top':properties.setStyle.padding +'px',
                      'background-color': properties.setStyle.backgroundImage?'':properties.setStyle.backgroundColor,
                      'background-image': properties.setStyle.backgroundImage?'url('+properties.setStyle.backgroundImage+')':'',
                          }">
      <slot name="title">
        <view v-if="properties.setStyle.jsonData.title" class="schoolGroupCardTitle">
          <view class="titleImgOrText" v-if="properties.setStyle.jsonData.titleType ==='2'">
            <uv-image :src="properties.setStyle.jsonData.titleBgImg" mode="heightFix" height="20"/>
          </view>
          <view class="titleImgOrText" v-if="properties.setStyle.jsonData.titleType ==='1'">
            <view :style="{color:properties.setStyle.mainTextColor}">{{ properties.setStyle.jsonData.title }}</view>
          </view>
          <view @click="moreClik" :style="{color:properties.setStyle.subTextColor}" class="more">{{ properties.setStyle.jsonData.more }}
            <!--          <uni-icons type="right" style="color: #909399" size="15"></uni-icons>-->
          </view>
        </view>
      </slot>


      <view class="groupinfo" v-for="(group,idx) in datas">
        <view style="display: flex;justify-content: space-between">
          <uvCountDown :time="group.countdown" :time-color="properties.setStyle.timeColor"
                       :time-bg-color="properties.setStyle.timeBgColor"/>
          <view class="titleImgOrText">
            <view :style="{color:properties.setStyle.mainTextColor}">【{{ group.activityName }}】</view>
          </view>
        </view>

        <view class="uni-body">
          <uv-gap height="10"/>
          <uv-row :gutter="10">
            <uv-col :span="4.5">
              <uv-image mode="aspectFill" radius="10" :src="group.goods.goodsImg||''" width="130px" height="100px"></uv-image>
            </uv-col>

            <uv-col :span="7.5">
              <view style="width: 100%">
                <view :style="{color:properties.setStyle.mainTextColor}" class="groupRowTitle">
                  【{{ group.goods.goodsName }} {{ group.goods.skuName }}】
                </view>
                <view class="groupRowSubTitle">
                  <text :style="{color:properties.setStyle.subTextColor}" v-if="group.goods.minNumber!=group.goods.maxNumber">
                    [{{ group.goods.minNumber }} ～ {{ group.goods.maxNumber }}件团]
                  </text>

                  <text :style="{color:properties.setStyle.subTextColor}" v-else>
                    【{{ group.goods.minNumber }}件团】
                  </text>

                </view>
              </view>

              <view class="" style="margin: 4px 0 8px 0;">
                <uv-line-progress :percentage="((group.goods.saleNum/group.goods.maxNumber)*100).toFixed(2)" :height="10"
                                  :activeColor="properties.setStyle.progressColor"></uv-line-progress>
              </view>

              <view style="display: flex;justify-content: space-between;padding-top: 2px;">
                <view :style="{color:properties.setStyle.priceColor}">¥<span
                    style="font-size: 18px">{{ group.goods.activityPrice }}</span></view>
                <span class="buttonJoin"
                      @click="join(group)"
                      :style="{
                    border: '1px solid ' + properties.setStyle.buttonColor,
                    color: properties.setStyle.buttonColor
                  }"
                >{{ group.state == 0 ? properties.setStyle.jsonData.button : '活动结束' }}
                </span>
              </view>
            </uv-col>
          </uv-row>
          <uv-gap height="10"/>
          <view class="bottom-view">
            <view :style="{color:properties.setStyle.subTextColor}" class="deliveryTime_text">
              配送时间:
              {{ group.deliveryTimeSort }}
            </view>

            <view :style="{color:properties.setStyle.subTextColor}" class="deliveryTime_text">
              {{ group.schoolName }}
            </view>
          </view>

          <slot name="bottom"></slot>
        </view>


        <view v-if="datas.length -1 !==idx ">
          <uv-gap height="10"/>
          <uv-divider text=""></uv-divider>
          <uv-gap height="10"/>
        </view>

      </view>


    </view>
  </view>
</template>
<script>
//拼团
import index from "./index.vue";
import uvCountDown from './uv-count-down.vue'

export default {
  name: "SchoolGroup",
  components: {uvCountDown},
  computed: {
    index() {
      return index
    }
  },
  data() {
    return {
      timeData: {},
      timeDatas: []
    }
  },
  props: {
    properties: {
      type: Object,
      default: function () {
        return {
          "text": "代拿拼团",
          "type": "school_group",
          "setStyle": {
            "text": "代拿拼团",
            "jsonData": {
              "title": "超级拼团",
              "more": "更多",
              "pic": "",
              "titleType": "2",
              "button": "立即参与",
              "bgType": "1",
              "titleBgImg": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/Snipaste_2024-09-14_19-06-58.png",
              "butto": "接单"
            },
            "pageMargin": 12,
            "buttonColor": "rgba(255, 140, 0, 1)",
            "progressColor": "rgba(12, 151, 193, 1)",
            "priceColor": "rgba(35, 160, 21, 1)",
            "borderRadius": 10,
            "timeColor": "rgba(254, 255, 255, 1)",
            "padding": 10,
            "backgroundColor": "rgba(255, 255, 255, 1)",
            "backgroundImage": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/ChMkJ1bKxu6IOsXzAAl4dFuJG3IAALHsgCXczkACXiM668.jpg",
            "timeBgColor": "rgba(255, 140, 0, 1)",
            "heade": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/ChMkJ1bKxu6IaQ3TAALczr42FdkAALHsgCt6K4AAtzm138.jpg"
          }
        }
      }
    },
    datas: {
      type: Array,
      default: function () {
        return []
      }
    },
    methods: {},
    onShow() {

    }
  },
  methods: {
    join(group) {
      let params = encodeURIComponent(JSON.stringify(
          {'activityId': group.id}));
      uni.navigateTo({
        url: `/pages/school/group-detail/index?params=${params}`
      })
    },
    moreClik() {
      uni.navigateTo({
        url: `/pages/school/group-list/index`
      })
    },
    onChange(e, index) {
      this.datas[index]['timeData'] = e;
    }
  }
}
</script>

<style lang="scss">
@import './index';

</style>

<style scoped lang="scss">


</style>
